import "./_style.scss";
import { List, Select } from "antd";
import { useEffect, useState } from "react";
import { getArticleList, getTypeList } from "../../../api/api";
import { Link } from "react-router-dom";
const {Option} = Select;


const Articles = () => {
  const [types, setTypes] = useState([]);
  const [articles, setArticles] = useState([]);
  const [typeID, setTypeID] = useState();
  useEffect(() => {
    getTypeList().then((res => {
      setTypes(res.typeLists);
      setTypeID(res.typeLists[0].id);
    }));
  }, []);
  useEffect(() => {
    typeID && getArticleList(typeID).then(art => {
      setArticles(art.articleLists);
    });
  }, [typeID]);
  return (
    <div className="list">
      <div className="select_box">
        <Select value={typeID} onChange={(id) => setTypeID(id)}>
          {types.map(item => <Option key={item.id} value={item.id}>{item.type}</Option>)}
        </Select>
      </div>
      <div className="articles">
        <List header="文章列表">
          {articles.map(item => {
            const {title, createdAt, authName, id} = item;
            return (
              <Link key={id} to={`detail/${id}`}>
                <List.Item>
                  <div className="article-item">
                    <div className="article-title">
                      {title}
                    </div>
                    <div className="article-auth">
                      作者: {authName}
                    </div>
                    <div className="article-createdat">
                      创建于: {createdAt}
                      {id}
                    </div>
                  </div>
                </List.Item>
              </Link>
            )
          })}
        </List>
      </div>
    </div>
  )
}

export default Articles;